<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Generation setting')"
    width="500px"
    @close="store.hide()"
  >
    <el-card>
      <!-- Input generation 行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="8">
          <label>{{ t('Input generation') }}:</label>
        </el-col>
        <el-col :span="16">
          <el-select
            :model-value="store.inputGeneration === '' ? 'raw_data_placeholder' : store.inputGeneration"
            @change="handleInputGenerationChange"
            style="width: 100%"
          >
            <el-option
              :label="t('Raw data')"
              value="raw_data_placeholder"
            />
            <el-option
              v-for="generation in store.generationList"
              :key="generation"
              :label="generation"
              :value="generation"
            />
          </el-select>
        </el-col>
      </el-row>

      <!-- Output generation 行 -->
      <el-row :gutter="8" style="align-items: center;" v-if="store.showOutputGeneration">
        <el-col :span="8">
          <label>{{ t('Output generation') }}:</label>
        </el-col>
        <el-col :span="16">
          <el-input
            v-model="store.outputGeneration"
            @change="store.handleOutputGenerationChange"
            placeholder=""
          />
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { onMounted } from 'vue'
import { useGenerationSettingStore } from '@/stores/generationSetting'
import { useLanguageStore } from '@/stores/language'

const store = useGenerationSettingStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Generation setting': {
      'en': 'Generation setting',
      'zh': 'Generation设置'
    },
    'Input generation': {
      'en': 'Input generation',
      'zh': '输入generation'
    },
    'Output generation': {
      'en': 'Output generation',
      'zh': '输出generation'
    },
    'Raw data': {
      'en': '(Raw data)',
      'zh': '(原始数据)'
    },
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 处理输入generation变化
const handleInputGenerationChange = (value) => {
  // 将 'raw_data_placeholder' 转换回空字符串
  const actualValue = value === 'raw_data_placeholder' ? '' : value
  store.handleInputGenerationChange(actualValue)
}

onMounted(async () => {
  await store.initialize()
})
</script>